import PropTypes from "prop-types";
import { useDispatch } from "react-redux";
import { Form, Input, Button } from "antd-mobile";
import { createAction } from "@common/utils";
import { SET_ERR_MSG } from "@store/global-state/action-types";

const LoginForm = (props) => {
  const dispatch = useDispatch();
  const [form] = Form.useForm();

  const handleLogin = () => {
    let fieldsValue = form.getFieldValue();
    let { account, password } = fieldsValue;
    if (!account || !password) {
      dispatch(createAction(SET_ERR_MSG, "请输入正确的账号及密码!"));
    } else {
      dispatch(createAction(SET_ERR_MSG, null));
      props.handleLogin(fieldsValue);
    }
  };

  return (
    <div style={{padding: '1rem 2.5rem'}}>
      <Form form={form} layout="vertical">
        <Form.Item label="账号" name="account">
          <Input placeholder="请输入账号" clearable />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input placeholder="请输入密码" clearable type="password" />
        </Form.Item>
      </Form>
      <Button block color="primary" size="large" onClick={handleLogin} style={{ marginTop: "3rem" }}>
        登 录
      </Button>
    </div>
  );
};

LoginForm.propTypes = {
  handleLogin: PropTypes.func
};

export default LoginForm;